<template>
	<div class="add-package">
		<head-title title="商品--编辑N98套餐" v-if="groupForm.is_house===1"></head-title>
		<head-title title="商品--编辑全屋套餐" v-if="groupForm.is_house===2"></head-title>
		<head-title title="商品--编辑特价套餐" v-if="groupForm.is_house===3"></head-title>
		<el-card>
			<div class="title">套餐SKU</div>
			<el-form :model="groupForm" :rules="groupRule" ref="groupForm" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="套餐名称:" prop="group_name">
							<el-input v-model="groupForm.group_name" placeholder="请输入套餐名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="套餐编号:" prop="group_sn">
							<el-input v-model="groupForm.group_sn" placeholder="请输入套餐编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="admin_id!=3">
						<el-form-item label="零售价格:" prop="retail_price">
							<el-input v-model="groupForm.retail_price" placeholder="请输入零售价格" :disabled="groupForm.is_house==2?true:false"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-else>
						<el-form-item label="出厂价格:" prop="factory_price">
							<el-input v-model="groupForm.factory_price" placeholder="请输入出厂价格"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="风格分类:" prop="style_id">
							<el-select v-model="groupForm.style_id">
								<el-option v-for="(data,index) in styleList" :key="index" :label="data.style_name" :value="data.style_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="空间分类:" prop="space_id">
							<el-select v-model="groupForm.space_id">
								<el-option v-for="(data,index) in spaceList" :key="index" :label="data.space_name" :value="data.space_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="套餐类型:" prop="is_house">
							<el-select v-model="groupForm.is_house" :disabled="true">
								<el-option label="N98套餐" :value="1"></el-option>
								<el-option label="全屋套餐" :value="2"></el-option>
								<el-option label="特价套餐" :value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="groupForm.is_house==3">
						<el-form-item label="划线价:" prop="market_price">
							<el-input v-model="groupForm.market_price" placeholder="请输入划线价"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="包装件数:" prop="pack_id">
							<el-select v-model="groupForm.pack_id">
								<el-option v-for="(data,index) in packList" :key="index" :label="data.pack_name" :value="data.pack_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="包装体积:" prop="bulk">
							<el-input v-model="groupForm.bulk" placeholder="请输入包装体积"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="服务:" prop="serve_id">
							<el-select v-model="groupForm.serve_id">
								<el-option v-for="(data,index) in serveList" :key="index" :label="data.serve_name" :value="data.serve_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="货期:" prop="send_id">
							<el-select v-model="groupForm.send_id">
								<el-option v-for="(data,index) in sendList" :key="index" :label="data.send_name" :value="data.send_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="安装方式:" prop="install_id">
							<el-select v-model="groupForm.install_id">
								<el-option label="整装" :value="1"></el-option>
								<el-option label="组装" :value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="物流:" prop="express_id">
							<el-select v-model="groupForm.express_id">
								<el-option v-for="(data,index) in expressList" :key="index" :label="data.express_name" :value="data.express_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="运费:" prop="express_price">
							<el-input v-model="groupForm.express_price" placeholder="请输入运费"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="groupForm.is_house!=3">
						<el-form-item label="多少选多少:" prop="remark">
							<el-input v-model="groupForm.remark" placeholder="请输入多少选多少"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否定制:">
							<el-select v-model="groupForm.is_customized" placeholder="请选择" >
								<el-option v-for="(item,index) in customizedList" :key="index" :value="item.value" :label="item.label"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="VR:" prop="">
							<el-input v-model="groupForm.vr_url" placeholder="请输入VR链接"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="排序:" prop="sort">
							<el-input v-model="groupForm.sort" placeholder="请输入排序"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="groupForm.is_house!=3">
						<el-form-item label="使用平台" prop="platform_type">
							<el-select v-model="groupForm.platform_type" placeholder="请选择平台">
								<el-option v-for="item in platformList" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="套餐简介:" prop="brief">
							<el-input type="textarea" rows="6" v-model="groupForm.brief" placeholder="请输入套餐简介"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div class="title">
					添加主套餐款号
					<el-button type="primary" size="small" style="margin-left: 20px;" @click="addPro">添加</el-button>
					<el-button type="primary" size="small" style="margin-left: 20px;" @click="restPro">重置</el-button>
				</div>
				<el-row :gutter="20" class="group-prolist" v-for="(data,index) in groupForm.major" :key="index">
					<el-col :span="3">
						<el-form-item label="空间分类:" :prop="`major[${index}].group_space_id`" :rules="{ required: true, message: '请选择空间分类', trigger: 'change'}">
							<el-select v-model="data.group_space_id">
								<el-option v-for="(spaceData,index) in spaceList" :key="index" :label="spaceData.space_name" :value="spaceData.space_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="3" v-if="groupForm.is_house==2">
						<el-form-item label="价格:">
							<el-input v-model="data.group_space_price" :disabled="groupForm.is_house==2?true:false"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="3" v-if="groupForm.is_house==2">
						<el-form-item label="上传图片:" :prop="`major[${index}].group_space_image`" :rules="{ required: true, message: '请上传图片'}">
							<el-upload accept="image/jpeg,image/png" class="avatar-uploader" action="fakeaction" :show-file-list="false"
							 :http-request="function (res) { return upload(res,0,index)}">
								<el-image v-if="data.group_space_image" :src="data.group_space_image"></el-image>
								<i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
							</el-upload>
						</el-form-item>
					</el-col>
					<template v-for="(item,i) in data.group_class">
						<div class="clearfix" v-if="i > 0"></div>
						<el-col :span="3" v-if="i > 0" style="font-size: 0; height: 1px;"></el-col>
						<el-col :span="6" v-if="groupForm.is_house==2&& i > 0" style="font-size: 0; height: 1px;"></el-col>
						<el-col :span="3">
							<el-form-item label="品类分类:" :prop="`major[${index}].group_class[${i}].group_class_id`" :rules="{ required: true, message: '请选择品类分类', trigger: 'change'}">
								<el-select v-model="item.group_class_id">
									<el-option v-for="(classData,index) in classList" :key="index" :label="classData.class_name" :value="classData.class_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<template v-for="(lastItem,y) in item.goods_list">
							<div class="clearfix" v-if="y>0"></div>
							<el-col :span="6" v-if="y > 0" style="font-size: 0; height: 1px;"></el-col>
							<el-col :span="6" v-if="groupForm.is_house==2&& y > 0" style="font-size: 0; height: 1px;"></el-col>
							<el-col :span="5">
								<el-form-item label="主套餐商品:" :prop="`major[${index}].group_class[${i}].goods_list[${y}].group_goods`" :rules="{ required: true, message: '请输入主套餐商品款号', trigger: 'blur'}">
									<el-input placeholder="请输入商品款号" v-model="lastItem.group_goods"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="2">
								<el-form-item label="数量:" :prop="`major[${index}].group_class[${i}].goods_list[${y}].num`" :rules="{ required: true, message: '请输入商品数量', trigger: 'blur'}">
									<el-input placeholder="请输入商品数量" v-model="lastItem.num"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<div class="add">
									<el-button type="primary" size="mini" @click="addClass(index,i)" v-if="i < 1 && y < 1">添加品类</el-button>
									<el-button type="danger" size="mini" @click="delClass(index,i)" v-if="i > 0 && y < 1">删除品类</el-button>
									<el-button type="warning" size="mini" @click="addProItem(index,i,y)" v-if="y < 1">添加商品</el-button>
									<el-button type="danger" size="mini" @click="delSProItem(index,i,y)" v-if="y > 0">删除商品</el-button>
									<el-button type="danger" size="mini" @click="delSpace(index)" v-if="index > 0 && i < 1 && y < 1">删除空间</el-button>
									<el-button size="mini" circle icon="el-icon-arrow-up" @click="changeSort(index,i,'up')" v-if="i > 0"></el-button>
									<el-button size="mini" circle icon="el-icon-arrow-down" @click="changeSort(index,i,'down')" v-if="i!=data.group_class.length - 1"></el-button>
								</div>
							</el-col>
						</template>
					</template>
				</el-row>
				<el-row :gutter="20" style="margin-top: 20px;" v-if="groupForm.is_house!=3">
					<el-col :span="8">
						<el-form-item label="软装包商品:">
							<el-input v-model="groupForm.group_soft" placeholder="请输入商品款号并用'/'斜杠隔开"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" v-if="groupForm.is_house!=3">
					<el-col :span="8">
						<el-form-item label="丰富区商品:">
							<el-input v-model="groupForm.group_addition" placeholder="请输入商品款号并用'/'斜杠隔开"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" style="text-align: center; padding: 50px 0;">
					<el-button type="primary" size="small" @click="generatePackage">生成套餐</el-button>
				</el-row>
				<div class="table-theme" style="margin-bottom: 40px;" v-if="group_goods.length">
					<div class="sku-tit">主套餐商品预览</div>
					<el-table :data="group_goods" border>
						<el-table-column label="ID" align="center" width="55" prop="id"></el-table-column>
						<el-table-column label="类别" align="center">
							<template slot-scope="scope">主套餐</template>
						</el-table-column>
						<el-table-column label="商品款号" align="center">
							<template slot-scope="scope">
								<div style="margin-bottom: 5px;">{{scope.row.goods_sn}}</div>
								<el-tag size="medium" type="danger" v-if="scope.row.sn_type==1">商品编号</el-tag>
								<el-tag size="medium" type="primary" v-if="scope.row.sn_type==2">sku编号</el-tag>
								<el-tag size="medium" type="info" v-if="scope.row.sn_type==0">没有</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="商品属性" align="center">
							<template slot-scope="scope">
								{{scope.row.color}}、{{scope.row.size}}、{{scope.row.lining}}
							</template>
						</el-table-column>
						<el-table-column label="商品数量" align="center" width="120">
							<template slot-scope="scope">{{scope.row.num}}件</template>
						</el-table-column>
						<el-table-column label="空间分类" align="center" prop="space_name"></el-table-column>
						<el-table-column label="品类分类" align="center" prop="class_name"></el-table-column>
						<el-table-column label="图片" align="center">
							<template slot-scope="scope">
								<!-- <el-image :src="scope.row.image_thumb" style="width: 60px; height: 60px;"></el-image> -->
								<ImgPopover :src="scope.row.image_thumb" style="width: 60px; height: 60px;"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="上/下架" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.is_sale==0">
									<el-tag type="danger">商品不存在</el-tag>
								</div>
								<div v-else>
									<el-switch v-model="scope.row.is_sale" active-text="上架" inactive-text="下架" :active-value="1" :inactive-value="2"
									 :disabled="true"></el-switch>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="查看商品详情" align="center">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="lookData(scope.row)">查看商品详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="table-theme" style="margin-bottom: 40px;" v-if="group_soft.length">
					<div class="sku-tit">软装包商品预览</div>
					<el-table :data="group_soft" border>
						<el-table-column label="ID" align="center" width="55"></el-table-column>
						<el-table-column label="类别" align="center">
							<template slot-scope="scope">软装包</template>
						</el-table-column>
						<el-table-column label="商品款号" align="center" prop="sn"></el-table-column>
						<el-table-column label="商品款号" align="center">
							<template slot-scope="scope">
								<div style="margin-bottom: 5px;">{{scope.row.sn}}</div>
								<el-tag size="medium" type="danger" v-if="scope.row.sn_type==1">商品编号</el-tag>
								<el-tag size="medium" type="danger" v-if="scope.row.sn_type==2">sku编号</el-tag>
								<el-tag size="medium" type="danger" v-if="scope.row.sn_type==0">没有</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center">
							<template slot-scope="scope">
								<el-image :src="scope.row.image_thumb" style="width: 60px; height: 60px;"></el-image>
							</template>
						</el-table-column>
						<el-table-column label="上/下架" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.is_sale==0">
									<el-tag type="danger">商品不存在</el-tag>
								</div>
								<div v-else>
									<el-switch v-model="scope.row.is_sale" active-text="上架" inactive-text="下架" :active-value="1" :inactive-value="2"
									 :disabled="true"></el-switch>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="查看商品详情" align="center">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="lookData(scope.row)">查看商品详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="table-theme" style="margin-bottom: 40px;" v-if="group_addition.length">
					<div class="sku-tit">丰富区商品预览</div>
					<el-table :data="group_addition" border>
						<el-table-column label="ID" align="center" width="55"></el-table-column>
						<el-table-column label="类别" align="center">
							<template slot-scope="scope">丰富区</template>
						</el-table-column>
						<el-table-column label="商品款号" align="center" prop="sn"></el-table-column>
						<el-table-column label="图片" align="center">
							<template slot-scope="scope">
								<el-image :src="scope.row.image_thumb" style="width: 60px; height: 60px;"></el-image>
							</template>
						</el-table-column>
						<el-table-column label="上/下架" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.is_sale==0">
									<el-tag type="danger">商品不存在</el-tag>
								</div>
								<div v-else>
									<el-switch v-model="scope.row.is_sale" active-text="上架" inactive-text="下架" :active-value="1" :inactive-value="2"
									 :disabled="true"></el-switch>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="查看商品详情" align="center">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="lookData(scope.row)">查看商品详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="title">套餐图片 <el-tag>图片仅限JPG\PNG格式(必填)</el-tag>
				</div>
				<div class="case_upload clearfix">
					<el-col :span="5">
						<el-form-item label="上传主图:" class="upload-box" prop="image">
							<div class="case-img-upload">
								<div class="case-img-upload-btns">
									<el-upload :disabled="disabled" ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return upload(res,1)}">
										<el-button :disabled="disabled" type="primary" size="small">上传图片</el-button>
									</el-upload>
									<div class="el-upload__tip">小于500KB</div>
								</div>
								<div class="case-img-upload-imgs">
									<el-image :src="groupForm.image">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="货架图:" class="upload-box" prop="">
							<div class="case-img-upload">
								<div class="case-img-upload-btns">
									<el-upload :disabled="disabled" ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return upload(res,4)}">
										<el-button :disabled="disabled" type="primary" size="small">上传图片</el-button>
									</el-upload>
									<div class="el-upload__tip">小于500KB</div>
								</div>
								<div class="case-img-upload-imgs">
									<el-image :src="groupForm.shelf_image">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="14">
						<el-form-item label="上传附图:" class="upload-box" prop="vice_img_vice_big">
							<ImageDrag @change="getviceImg" :list="viceImage"></ImageDrag>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="groupForm.is_house!=3">
						<el-form-item label="上传视频:(可选)" class="upload-box">
							<div class="case-img-upload">
								<div class="case-img-upload-btns">
									<el-upload :disabled="disabled" ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return uploadVideo(res,1)}"
									 accept="video/mp4,avi">
										<el-button :disabled="disabled" type="primary" size="small">上传视频</el-button>
									</el-upload>
									<el-button :disabled="disabled" type="danger" size="small" @click="rest('video')">重置</el-button>
									<div class="el-upload__tip">小于20MB</div>
								</div>
								<div class="case-img-upload-imgs">
									<el-image v-show="!groupForm.video">
										<div slot="error"></div>
									</el-image>
									<div class="vice_big_box" style="width: 300px; margin-left: 25px;" v-show="groupForm.video">
										<video-player :disabled="disabled" id="video" ref="videoPlayer" class="vjs-custom-skin" :playsinline="true"
										 :options="playerOptions" />
									</div>
								</div>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="18" v-if="groupForm.is_house!=3">
						<el-form-item label="上传海报:" class="upload-box" prop="">
							<div class="case-img-upload">
								<div class="case-img-upload-btns">
									<el-upload :disabled="disabled" ref="upload" action="fakeaction" :show-file-list="false" :http-request="function (res) { return upload(res, 5)}">
										<el-button :disabled="disabled" type="primary" size="small">上传图片</el-button>
									</el-upload>
								</div>
								<div class="case-img-upload-imgs">
									<el-image :src="groupForm.image_poster">
										<div slot="error"></div>
									</el-image>
								</div>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="上传详情图:" class="upload-box" prop="info_img">
							<VueSortableImg @change="getInfoImg" :list="img_info"></VueSortableImg>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item>
							<el-button type="primary" @click="onSubmit('groupForm')" style="margin-left: 45px;">修改</el-button>
						</el-form-item>
					</el-col>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import VueSortableImg from '@/components/VueSortableImg';
	import ImgPopover from '@/components/ImgPopover';
	import ImageDrag from '@/components/ImageDrag';
	import {
		packList,
		serveList,
		sendList,
		expressList,
		styleList,
		spaceList,
		platformList
	} from '@/assets/api/JSON'
	import proData from '@/views/goods/goods_details'
	export default {
		components: {
			VueSortableImg,
			ImageDrag,
			ImgPopover
		},
		data() {
			return {
				styleList: styleList,
				spaceList: spaceList,
				packList: packList,
				serveList: serveList,
				sendList: sendList,
				expressList: expressList,
				platformList,
				classList: [],
				disabled: false,
				groupForm: {
					sort: 0,
					vr_url: '',
					group_name: '',
					group_sn: '',
					retail_price: '',
					factory_price: '',
					market_price: '',
					style_id: '',
					space_id: '',
					is_house: this.$route.name === 'add_package' ? 1 : 2,
					pack_id: '',
					bulk: '',
					serve_id: '',
					send_id: '',
					install_id: '',
					express_id: '',
					express_price: '',
					remark: '',
					brief: '',
					major: [{
						group_space_id: '',
						group_space_price: '',
						group_space_image: '',
						group_class: [{
							group_class_id: '',
							goods_list: [{
								group_goods: '',
								num: ''
							}]
						}]
					}],
					group_soft: '',
					group_addition: '',
					shelf_image: '',
					image: '',
					image_middle: '',
					image_thumb: '',
					vice_img_vice_big: '',
					vice_img_vice_middle: '',
					video: '',
					info_img: '',
					image_poster: '',
					platform_type:''
				},
				groupRule: {
					sort: [{
						required: true,
						message: '请输入排序',
						trigger: 'blur'
					}],
					group_name: [{
						required: true,
						message: '请输入套餐名称',
						trigger: 'blur'
					}],
					group_sn: [{
						required: true,
						message: '请输入套餐编号',
						trigger: 'blur'
					}],
					retail_price: [{
						required: true,
						message: '请输入零售价格',
						trigger: 'blur'
					}],
					factory_price: [{
						required: true,
						message: '请输入出厂价格',
						trigger: 'blur'
					}],
					style_id: [{
						required: true,
						message: '请选择风格分类',
						trigger: 'change'
					}],
					space_id: [{
						required: true,
						message: '请选择空间分类',
						trigger: 'change'
					}],
					is_house: [{
						required: true,
						message: '请选择套餐类型',
						trigger: 'change'
					}],
					pack_id: [{
						required: true,
						message: '请选择包装件数',
						trigger: 'change'
					}],
					bulk: [{
						required: true,
						message: '请输入包装体积',
						trigger: 'blur'
					}],
					serve_id: [{
						required: true,
						message: '请选择服务',
						trigger: 'change'
					}],
					send_id: [{
						required: true,
						message: '请选择货期',
						trigger: 'change'
					}],
					install_id: [{
						required: true,
						message: '请选择安装方式',
						trigger: 'change'
					}],
					express_id: [{
						required: true,
						message: '请选择物流',
						trigger: 'change'
					}],
					express_price: [{
						required: true,
						message: '请输入运费',
						trigger: 'blur'
					}],
					remark: [{
						required: true,
						message: '请输入多少选多少',
						trigger: 'blur'
					}],
					brief: [{
						required: true,
						message: '请输入套餐简介',
						trigger: 'blur'
					}],
					image: [{
						required: true,
						message: '请上传主图',
						trigger: 'change'
					}],
					vice_img_vice_big: [{
						required: true,
						message: '请至少上传一张附图',
						trigger: 'change'
					}],
					info_img: [{
						required: true,
						message: '请至少上传一张详情图',
						trigger: 'change'
					}],
					platform_type: [{
						required: true,
						message: '请选择使用平台',
						trigger: 'change'
					}],
				},
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4',
						src: ''
					}],
					hls: true,
					poster: '', // 你的封面地址
					width: '300px', // 播放器宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试'
				},
				group_goods: [],
				group_soft: [],
				group_addition: [],
				// 详情图
				img_info: [],
				NewinfoImg: [],
				// 附图
				viceImage: [],
				NewBViceImg: [],
				NewMViceImg: [],
				customizedList: [{
						value: 0,
						label: '否'
					},
					{
						value: 1,
						label: '是'
					}
				],
				admin_id: localStorage.getItem('admin_id') // admin_id 理员 1是总号，2是商家，3是厂家，4财务，5招商，6产品，7仓管 8收费厂家 9.外部招商员
			}
		},
		methods: {
			getInfoImg(info_img) {
				this.NewinfoImg = info_img
			},
			getviceImg(vice_big, vice_middle) {
				this.NewBViceImg = vice_big
				this.NewMViceImg = vice_middle
			},
			// 获取套餐详情
			init() {
				this.$http(this.$ptApiList.GroupInfo, {
					group_id: this.$route.query.group_id
				}).then(res => {
					this.groupForm = {
						group_id: res.datas.group_id,
						group_name: res.datas.group_name,
						group_sn: res.datas.group_sn,
						vr_url: res.datas.vr_url,
						sort: res.datas.sort,
						retail_price: res.datas.retail_price,
						factory_price: res.datas.factory_price,
						market_price: res.datas.market_price,
						style_id: res.datas.style_id,
						space_id: res.datas.space_id,
						is_house: res.datas.is_house,
						pack_id: res.datas.pack_id,
						bulk: res.datas.bulk,
						serve_id: res.datas.serve_id,
						send_id: res.datas.send_id,
						install_id: res.datas.install_id,
						express_id: res.datas.express_id,
						express_price: res.datas.express_price,
						remark: res.datas.remark,
						brief: res.datas.brief,
						major: res.datas.major_group,
						group_soft: res.datas.group_soft.group_goods_list,
						group_addition: res.datas.group_addition.group_goods_list,
						shelf_image: res.datas.shelf_image,
						image: res.datas.image,
						image_middle: res.datas.image_middle,
						image_thumb: res.datas.image_thumb,
						video: res.datas.video,
						info_img: res.datas.info_img,
						image_poster: res.datas.image_poster,
						is_customized: res.datas.is_customized,
						platform_type: res.datas.platform_type
					}
					let vice_big = []
					if (res.datas.vice_big && res.datas.vice_big.length) {
						res.datas.vice_big.forEach(item => {
							vice_big.push(item.image)
						})
					}
					let vice_middle = []
					if (res.datas.vice_middle && res.datas.vice_middle.length) {
						res.datas.vice_middle.forEach(item => {
							vice_middle.push(item.image)
						})
					}
					let img_info = []
					if (res.datas.img_info && res.datas.img_info.length) {
						res.datas.img_info.forEach(item => {
							img_info.push(item.image)
						})
					}

					this.$set(this.groupForm, 'vice_img_vice_big', vice_big.join(','))
					this.$set(this.groupForm, 'vice_img_vice_middle', vice_middle.join(','))
					this.$set(this.groupForm, 'info_img', img_info.join(','))

					vice_big.forEach((a, i) => {
						let item = {
							src: a,
							msrc: vice_middle[i]
						}
						this.viceImage.push(item)
					})

					this.img_info = img_info

					this.$nextTick(() => {
						this.playerOptions.sources[0].src = res.datas.video
					})
					this.generatePackage()
				})
			},
			// 获取风格分类&获取空间分类
			getSpaceGetStyleGetClass() {
				this.$http(this.$ptApiList.classList).then(res => {
					this.classList = res.datas
				})
			},
			// 图片上传
			upload(params, type, index) {
				let id = 0
				let proindex = index
				const file = params.file,
					fileType = file.type,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 2048;
				if (!isJPGPNG) {
					this.$message.error("只能上传图片格式png、jpg!");
					return;
				}
				if (type != 5) {
					if (!isLt500KB) {
						this.$message.error("图片不能大于2M!");
						return;
					}
				}
				const form = new FormData();
				form.append("file[]", file);
				switch (Number(type)) {
					case 0:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.groupForm.major[proindex].group_space_image = res.datas[0]
						})
						break;
					case 1:
						this.$http(this.$ApiList.mainUpload, form).then(res => {
							this.groupForm.image = res.datas[0].major_img_big
							this.groupForm.image_middle = res.datas[0].major_img_middle
							this.groupForm.image_thumb = res.datas[0].major_img_thumb
						})
						break;
					case 4:
						// 上传货架图
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.groupForm.shelf_image = res.datas[0]
						})
						break;
					case 5:
						// 上传海报图
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.groupForm.image_poster = res.datas[0]
						})
						break;
				}
			},
			// 视频上传
			uploadVideo(params, type) {
				const file = params.file,
					isLt20MB = file.size / 1024 / 1024 < 20;
				if (!isLt20MB) {
					this.$message.error("视频不能大于20MB！");
					return;
				}
				const form = new FormData();
				form.append("file[]", file);
				this.$http(this.$ApiList.UpVideo, form).then(res => {
					this.groupForm.video = res.datas
					this.$nextTick(() => {
						this.playerOptions.sources[0].src = res.datas
					})
				})
			},
			// 重置图片
			rest(type) {
				switch (type) {
					case 'video':
						this.groupForm.video = ''
						break;
				}
			},
			// 添加套餐空间
			addPro() {
				this.groupForm.major.push({
					group_space_id: '',
					group_space_image: '',
					group_class: [{
						group_class_id: '',
						goods_list: [{
							group_goods: '',
							num: ''
						}]
					}]
				})
			},
			// 删除套餐空间
			delSpace(index) {
				this.groupForm.major.splice(index, 1)
			},
			// 重置主套餐款号
			restPro() {
				this.groupForm.major = [{
					group_space_id: '',
					group_class: [{
						class_id: '',
						class_name: '',
						goods_list: [{
							group_goods: '',
							num: ''
						}]
					}]
				}]
			},
			// 添加空间
			addProItem(index, i, y) {
				this.groupForm.major[index].group_class[i].goods_list.push({
					group_goods: '',
					num: ''
				})
			},
			//删除空间
			delSProItem(index, i, y) {
				this.groupForm.major[index].group_class[i].goods_list.splice(y, 1)
			},
			// 添加品类
			addClass(index, i) {
				this.groupForm.major[index].group_class.push({
					group_class_id: '',
					goods_list: [{
						group_goods: '',
						num: ''
					}]
				})
			},
			// 删除品类
			delClass(index, i) {
				this.groupForm.major[index].group_class.splice(i, 1)
			},
			// 检测商品信息是否填写完整
			verify() {
				let submit = false
				this.groupForm.major.forEach(item => {
					if (!item.group_space_id) {
						submit = false
						return false
					}
					if (this.groupForm.is_house == 2) {
						if (!item.group_space_id || !item.group_space_image) {
							submit = false
							return false
						}
					}
					item.group_class.forEach(data => {
						if (!data.group_class_id) {
							submit = false
							return false
						} else {
							data.goods_list.forEach(goodsItem => {
								if (!goodsItem.group_goods || !goodsItem.num) {
									submit = false
								} else {
									submit = true
								}
							})
						}
					})
				})
				return submit
			},
			// 生成套餐
			generatePackage() {
				let canSubmit = this.verify()
				if (this.$route.name === 'add_package') {
					this.groupForm.major.forEach(item => {
						delete item.group_space_price
						delete item.group_space_image
					})
				}
				if (canSubmit) {
					let data = {
						major_group: JSON.stringify(this.groupForm.major),
						group_soft: this.groupForm.group_soft,
						group_addition: this.groupForm.group_addition,
						is_house: this.groupForm.is_house
					}
					const loading = this.$loading({
						lock: true,
						text: '正在生成SKU，请稍后',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$http(this.$ptApiList.GroupCreateSku, data).then(res => {
						this.group_goods = res.datas.group_goods
						this.group_soft = res.datas.group_soft
						this.group_addition = res.datas.group_addition
						loading.close()
					})
				} else {
					this.$layer.msg('请完善信息后生成套餐SKU！')
				}
			},
			onSubmit(formName) {
				let vice_bg = [],
					vice_middle = [],
					img_info = []

				this.NewBViceImg.forEach(item => {
					vice_bg.push(item)
				})
				this.groupForm.vice_img_vice_big = vice_bg.join(',')


				this.NewMViceImg.forEach(item => {
					vice_middle.push(item)
				})
				this.groupForm.vice_img_vice_middle = vice_middle.join(',')


				this.NewinfoImg.forEach(item => {
					img_info.push(item)
				})
				this.groupForm.info_img = img_info.join(',')

				// console.log(this.groupForm)
				// return
				this.$refs[formName].validate(valid => {
					if (valid) {
						let data = {}
						data = JSON.parse(JSON.stringify(this.groupForm))
						this.$set(data, 'major', JSON.stringify(this.groupForm.major))
						this.$set(data, 'factory_sn', localStorage.getItem('factory_sn'))
						let editUrl = this.admin_id==3?this.$ApiList.FactoryUpdateGroup:this.$ptApiList.UpdateGroup
						this.$http(editUrl, data).then(res => {
							this.$layer.msg('修改成功')
							setTimeout(() => {
								this.$router.push({
									path: '/package_list'
								})
							}, 1500)
						})
					} else {
						this.$layer.msg('请完善信息后提交！')
						return false;
					}
				});
			},
			// 查看商品详情
			lookData(data) {
				if (!data.goods_id) {
					this.$layer.msg('该商品不存在！')
					return false;
				}
				this.$layer.iframe({
					content: {
						content: proData, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							source: true,
							goods_id: data.goods_id
						} //props
					},
					maxmin: true,
					area: ['90%', '90%'],
					title: data.goods_sn
				});
			},
			// 更改品类分类顺序
			changeSort(index,i,type){
				let x,
						y
				x = i
				if(type==='up'){
					y = i-1
				}else if(type==='down'){
					y = i+1
				}
				this.groupForm.major[index].group_class = this.Move(this.groupForm.major[index].group_class,x,y)
			},
			Move(arr, a, b) {
			  let arr_temp = [].concat(arr);  //创建一个新的临时数组，用以操作后不变更原数组
			  arr_temp.splice(b, 0, arr_temp.splice(a, 1)[0]);  //在b位置插入从a位置截取的元素
			  return arr_temp;
			}
		},
		created() {
			this.init()
			this.getSpaceGetStyleGetClass()
		}
	}
</script>
<style lang="scss">
	.add-package {
		.el-select {
			width: 100%;
		}

		.last {
			margin-bottom: 0;
		}

		.upload-drag {
			.el-upload {
				vertical-align: top;
			}

			.el-upload__tip {
				line-height: normal;
			}
		}

		.case_upload {
			display: flex;
			flex-wrap: wrap;

			.el-col {}
		}

		.el-select {
			display: block;
		}

		.upload-box {
			padding-left: 40px;

			.case-img-upload {
				display: flex;

				.case-img-upload-imgs {
					flex: 1;
					align-items: flex-start;

					.el-image {
						width: 140px;
						height: 140px;
						border: solid 1px #E5E5E5;
						margin-left: 25px;
						vertical-align: top;
					}
				}

				.case-img-upload-imgs-info {
					width: 100%;
					max-width: 660px;
					border: solid 1px #E5E5E5;
					margin-left: 25px;
					min-height: 390px;

					.case-img-upload-imgs-info-box {
						position: relative;

						.el-icon-error {
							position: absolute;
							font-size: 20px;
							color: #ef3030;
							right: 5px;
							top: 5px;
							z-index: 1;
							background-color: #FFF;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.el-image {
						width: 100%;
						vertical-align: top;
					}
				}

				.vice_big_box {
					position: relative;
					display: inline-block;
					vertical-align: top;
					margin-bottom: 20px;

					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #FFF;
						border-radius: 50%;
						cursor: pointer;
					}
				}
			}

			.el-upload__tip {
				width: 80px;
				text-align: center;
			}

			.el-form-item__label {
				float: none;
			}

			.el-form-item__content {
				margin-left: 0 !important;

				.el-button--danger {
					width: 80px;
					background-color: #37C1D6;
					border-color: #37C1D6;
				}
			}
		}

		.paddingLeft {
			padding-left: 33.33334% !important;
		}

		.add .el-button {
			vertical-align: middle;
			margin-top: 8px;
		}

		.group-prolist {
			background-color: #F9FEFF;
			padding-top: 22px;

			.el-form-item {
				display: flex;
			}

			.el-form-item__label {
				width: auto !important;
			}

			.el-form-item__content {
				margin-left: 0 !important;
				float: left;
				flex: 1;

				.avatar-uploader .el-upload {
					background-color: #FFF;

					.avatar-uploader-icon,
					.el-image {
						width: 80px;
						height: 80px;
						line-height: 80px;
					}

					.el-image {
						vertical-align: top;
					}
				}
			}
		}

		.sku-tit {
			text-align: center;
			margin-bottom: 20px;
			color: #574b90;
			font-size: 20px;
		}
	}
</style>
